import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    TextInput,
    TouchableOpacity, DeviceEventEmitter, Modal, Keyboard
} from 'react-native';
import Swiper from 'react-native-swiper';
import { MarqueeHorizontal, MarqueeVertical } from 'react-native-marquee-ab';
import Styles from './Styles';
const { width, height } = Dimensions.get('window')

import app from '../../../../app.json';
import Ugame from '../../../../Ugame';
import Utils from "../../../utils/Utils";

import DLTBall from "./DLTBall";
var BETTYPE = {
    One: 0,
    Multiple: 1,
    Bladder: 2
}
export default class DLTBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loaded: false,
            refreshing: false,
            toastModelVisible: false,
            message: '',
            Number:'',//期号
            betNumber: [],
            selectBetNumber: [],
            bet_count: 0,
            bet_amount: 0,

        };
    }
    static navigationOptions = {
        title: '大乐透',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
            paddingTop: 8
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            //fontWeight: 'bold',
        },
    }
    componentWillMount() {

    }

    componentWillUnmount() {

    }
    componentDidMount() {
        const { navigation } = this.props;
        let Number = navigation.getParam("Number");
        this.setState({
            Number: Number,
            betNumber: Ugame.DLTBox
        })
    }
    computeBetNumber() {
        let { betNumber, selectBetNumber } = this.state;
        let bet_count = 0;
        for (let i = 0; i < selectBetNumber.length; i++) {
            bet_count += betNumber[selectBetNumber[i]].betRecords.length;
        }
        let bet_amount = bet_count * app.PRICE;
        this.setState({
            bet_count: bet_count,
            bet_amount: bet_amount
        });
    }
    renderListsitem = ({ item, index }) => {
        let { selectBetNumber } = this.state;
        let betNumber = item.BetNumber.BetNumber.split('|');
        let red_ball = betNumber[0].split(',');
        let blue_ball = betNumber[1].split(',');
        let type = item.BetNumber.Type;
        let tips = '';
        switch (type) {
            case BETTYPE.One:
                tips = '单注';
                break;
            case BETTYPE.Multiple:
                tips = '复式';
                break;
            case BETTYPE.Bladder:
                tips = '胆拖';
                break;
        }
        let betCount = item.betCount;
        let betAmount = item.betAmount;
        return (
            <View style={Styles.DLTbox_lists}>
                <TouchableOpacity onPress={() => { this.on_select_bet(index) }}>
                    <View style={Styles.DLTbox_lists_item}>
                        {selectBetNumber.indexOf(index) == -1 ?
                            <Image resizeMode="cover" source={require('../../../image/js_img_list_icon_unchecked.png')} />
                            :
                            <Image resizeMode="cover" source={require('../../../image/js_img_list_icon_checked.png')} />
                        }
                    </View>
                </TouchableOpacity>
                <View style={Styles.DLTbox_lists_item2}>
                    <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
                            <Text style={{ color: '#d0162e' }}>{red_ball.join(' ')}</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
                            <Text style={{ color: '#1094d8' }}> {blue_ball.join(' ')}</Text>
                        </View>
                    </View>
                    <Text style={{ color: '#999999' }}>{tips}{betCount}注{betAmount}元</Text>
                </View>
                <TouchableOpacity onPress={() => this.on_del_bet(index)}>
                    <View style={Styles.DLTbox_lists_item}>
                        <Image resizeMode="cover" source={require('../../../image/js_img_ic_order_delete.png')} />
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
    on_select_bet = (index) => {
        let { selectBetNumber } = this.state;
        let i = selectBetNumber.indexOf(index);
        if (i > -1) {
            selectBetNumber.splice(i, 1);
        } else {
            selectBetNumber.push(index);
        }
        this.setState({
            selectBetNumber: selectBetNumber
        }, () => {
            this.computeBetNumber();
        });
    }
    on_del_bet = (index) => {
        let { betNumber, selectBetNumber } = this.state;
        let i = selectBetNumber.indexOf(index);
        if (i > -1) {
            selectBetNumber.splice(i, 1);
        }
        this.setState({
            betNumber: Ugame.delDLTBox(index),
            selectBetNumber: selectBetNumber
        }, () => {
            this.computeBetNumber();
        });
    }
    on_random_one_balls = () => {
        let { BetNumber } = this.state;
        //随机红球
        let red_ball = [];
        while (red_ball.length < 5) {
            let n = Utils.random_int(1, 35);
            let bool = true;
            for (let i = 0; i < red_ball.length; i++) {
                if (n == red_ball[i]) {
                    bool = false;
                    break;
                }
            }
            if (bool) {
                red_ball.push(Utils.pad(n));
            }
        }
        red_ball = red_ball.sort(function (a, b) { return a - b });
        //随机篮球
        let blue_ball = [];
        while (blue_ball.length < 2) {
            let n = Utils.random_int(1, 35);
            let bool = true;
            for (let i = 0; i < blue_ball.length; i++) {
                if (n == blue_ball[i]) {
                    bool = false;
                    break;
                }
            }
            if (bool) {
                blue_ball.push(Utils.pad(n));
            }
        }
        blue_ball = blue_ball.sort(function (a, b) { return a - b });
        let obj = DLTBall.betNumberComb(BETTYPE.One, this.state.Number, [], red_ball, [], blue_ball, 1);
        Ugame.addDLTBox(obj);
        this.setState({
            BetNumber: Ugame.DLTBox
        }, () => {
            this.computeBetNumber();
        });

    }
    on_clear_DLTBox = () => {
        this.setState({
            betNumber: Ugame.clearDLTBox(),
            selectBetNumber:[],
            bet_count: 0,
            bet_amount: 0
        })
    }
    on_DLTGame = () => {
        DeviceEventEmitter.emit('update_betNumber', {});
        this.props.navigation.navigate('DLTGame');
    }
    on_all_select = () => {
        let { betNumber, selectBetNumber } = this.state;
        let selectbet = [];
        for (let i = 0; i < betNumber.length; i++) {
            selectbet.push(i);
        }
        this.setState({
            selectBetNumber: selectbet
        }, () => {
            this.computeBetNumber();
        });
    }
    on_DLTBetList=()=>{
        let { betNumber,selectBetNumber } = this.state;
        if (!Ugame.isLogin()) {
            this.props.navigation.navigate('Login');
            return;
        }
        if (selectBetNumber.length == 0) {
            this.do_toast('至少选择一注', 1000);
            return;
        }
        let betNs = [];

        for(let i=0;i<selectBetNumber.length;i++){
            betNs.push(betNumber[selectBetNumber[i]]);
        }
        for(let i=0;i<selectBetNumber.length;i++){
            Ugame.delDLTBox(selectBetNumber[i]);
        }
        Ugame.addDLTSelectList(betNs);
        DeviceEventEmitter.emit('update_DLTBox', {});
        this.setState({
            betNumber:Ugame.DLTBox,
            selectBetNumber: [],
        },()=>{
            this.computeBetNumber();
            this.props.navigation.navigate('DLTBetList',{
                Number:Number
            });
        });
       
    }
    do_toast = (str, time) => {
        this.setState({
            message: str,
            toastModelVisible: true
        });
        setTimeout(() => {
            this.setState({
                message: '',
                toastModelVisible: false
            });
        }, time);
    }
    toast = () => {
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.toastModelVisible}
                onRequestClose={() => {
                    this.setState({
                        toastModelVisible: false
                    });
                }}
            >
                <View style={{ flexDirection: 'row', justifyContent: 'center', position: 'absolute', bottom: 100, width: width }}>
                    <Text style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: '#ffffff', borderRadius: 10, height: 40, lineHeight: 40, paddingLeft: 20, paddingRight: 20 }}>{this.state.message}</Text>
                </View>
            </Modal>
        );
    }
    render() {
        let { betNumber, bet_count, bet_amount } = this.state;
        return (
            <View style={Styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <View style={Styles.DLTbox_top}>
                    <TouchableOpacity onPress={() => { this.on_all_select() }}>
                        <View style={Styles.DLTbox_top_item}>
                            <Text style={{ color: '#666666', fontSize: 12 }}>全选</Text>
                        </View>
                    </TouchableOpacity>
                    <View style={{ width: 1, height: 15, backgroundColor: '#666666' }}></View>
                    <TouchableOpacity onPress={() => { this.on_DLTGame() }}>
                        <View style={Styles.DLTbox_top_item}>
                            <Text style={{ color: '#666666', fontSize: 12 }}>自选号码</Text>
                        </View>
                    </TouchableOpacity>
                    <View style={{ width: 1, height: 15, backgroundColor: '#666666' }}></View>
                    <TouchableOpacity onPress={() => { this.on_random_one_balls() }}>
                        <View style={Styles.DLTbox_top_item}>
                            <Text style={{ color: '#666666', fontSize: 12 }}>机选一注</Text>
                        </View>
                    </TouchableOpacity>
                    <View style={{ width: 1, height: 15, backgroundColor: '#666666' }}></View>
                    <TouchableOpacity onPress={() => { this.on_clear_DLTBox() }}>
                        <View style={Styles.DLTbox_top_item}>
                            <Text style={{ color: '#666666', fontSize: 12 }}>清空列表</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <ScrollView style={{ height: 400 }}>
                    <View style={Styles.lists}>
                        <FlatList
                            data={betNumber}
                            extraData={this.state}
                            keyExtractor={(item, index) => index.toString()}
                            renderItem={this.renderListsitem}
                        />
                    </View>
                </ScrollView>
                <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                    <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginBottom: 20 }}>
                        <Text style={{ color: "#707070" }}>投注列表</Text>
                        <Text style={{ color: "#d0162e" }}>{bet_count}</Text>
                        <Text style={{ color: "#707070" }}>注</Text>
                        <Text style={{ color: "#d0162e" }}>{bet_amount}</Text>
                        <Text style={{ color: "#707070" }}>元</Text>
                    </View>
                    <TouchableOpacity onPress={() => this.on_DLTBetList()}>
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#d0162e', width: width - 30, height: 40, marginBottom: 10, borderRadius: 5 }}>
                            <Text style={{ color: '#ffffff' }}>确认投注</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                {this.toast()}
            </View>
        )
    }



}
